<template>
    <div>
        <top-bar title="登录" :link="link"></top-bar>
        <div class="activity-info search">
            <div class='search-label'>
                    <div class="search-icon-wrap"><icon type="search"></icon></div>
                    <input v-link="{ path: '/search' }" type="text" class="search-input" placeholder="搜索" />
            </div>
            <div class="load-wrap" v-show='loading'><spinner type="lines" ></spinner></div>
                <post-view :items="items" v-show='items'></post-view>
                <div class="no-result" v-show="noResult">暂无数据 :(</div>
                <div class="load-wrap" v-show="nextItemsLoading"><spinner type="lines" ></spinner></div>
                <div class='back-to-top' @click='backToTop' v-show="backFlag"> <icon type="download" ></icon></div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import Spinner from 'vux-components/spinner'
import Icon from 'vux-components/icon'
import Login from '../components/Login/index.js'
import Toast from '../components/Toast/index.js'
import EventEmitter from "../common/EventEmitter.js"
import PostView  from '../components/PostPanel/postPanel'
import { PostServiceClass } from '../../services/post.js'


const post = new PostServiceClass()
export default {
    replace: true,
    components: {
        Spinner,
        Icon,
        PostView,
    },
    data() {
        return {
            items: [],
            show: false,
            loading:true,
            nextItemsLoading: false,
            iconClearFlag:false,
            noResult:false,
            scroll:true,
            backFlag:false
        }
    },
    route: {

        canReuse() {
            return true
        },
        data(transition) {
            //滚动加载
            this.getItems('')
            window.addEventListener('scroll',this.onScroll)
            // if(transition.from.name === 'detail'){
            //     this.setPosition()
            // }else{
            //     this.getItems('')
            // }
        },
        deactivate() {
            // sessionStorage.setItem('scrollTop',window.scrollY);
            window.removeEventListener('scroll',this.onScroll,true)
        },

    },
    methods: {
        showLogin: function() {
            Login.show()
        },
        // async setPosition(){
        //     await this.getItems('')
        //     console.log(sessionStorage.getItem('scrollTop'))
        //     window.scrollTo(0,sessionStorage.getItem('scrollTop'))
        // },
        getItems(keyword) {
            post.List('','','hotest').then((data)=> {
                this.items = data
                this.searchProcess(this.items)
            })
        },
        getNextItems() {
            post.Next().then((items)=> {
                for(let item of items)
                    this.items.push(item)
                this.scroll = true
                this.nextItemsLoading = false
            })
        },
        searchProcess(res) {
            this.loading = false
            if (res.length === 0) {
                this.noResult = true
            } else {
                this.noResult = false
            }
        },
        onScroll() {
            let totalHeight = window.body.clientHeight
            if( window.scrollY > 100){
                this.backFlag = true
            }
            if( window.scrollY <= 100){
                this.backFlag = false
            }
            if((totalHeight - window.scrollY) < (window.screen.availHeight + 48)){
                if(this.scroll){
                    this.scroll = false
                    this.nextItemsLoading = true
                    this.getNextItems()
                }
           }
        }
        ,
        backToTop() {
            window.scrollTo(0,0)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='sass' scoped>
    @import '../../vendor/styles/activity.scss';
</style>
